<template>
      <div id="publish">
            <el-card>
                  <div slot="header">
                        <img src="@/assets/logo.png">
                        <span>「问卷」</span>
                        {{paperList.title}}
                  </div>
                  <!-- 问卷内容 -->
                  <el-card v-for="(content,index) in paperList.content" :key="'content'+content.id">
                        <!-- 问卷题目 -->
                        <div slot="header">
                              {{index+1}}、{{content.value}}
                        </div>
                        <!-- 问卷选项 -->
                        <div>
                              <el-radio v-for="item in items" :key="item.id" v-model="paperList.content[index].answer" :label="item.id">
                                    {{item.text}}
                              </el-radio>
                        </div>
                  </el-card>
                  <el-card>
                        <!-- 建议 -->
                        <div slot="header">建议</div>
                        <el-input type="textarea"></el-input>
                  </el-card>
                  <el-button type="primary" @click="save">确定</el-button>
            </el-card>
      </div>
</template>

<script>
export default {
      props:['paper_id'],
      data(){
            return {
                  paperList:{},
                  items:[],
                  note:'',
            }
      },
      methods:{
            // 获取问卷数据请求
            getPaper(){
                  this.$http.get(`/papers/answer?paper_id=${this.paper_id}`).then(result=>{
                        if (result.data.error > 0 && result.data.error==4) {
                              this.$router.push('/users/login')
                              return
                        }
                        result.data.data.content=JSON.parse(result.data.data.content)
                        result.data.data.item=JSON.parse(result.data.data.item)
                        this.items=result.data.items
                        this.paperList=result.data.data
                  }).catch(error=>{
                        console.log(error)
                  })
            },
            // 保存问卷
            save(){
                  let result=true
                  this.paperList.content.forEach(el=>{
                        if(!el.answer){
                              this.$confirm('还有选项未完成,不能提交', '提示', {
                                    confirmButtonText: '确定',
                                    type: 'warning'
                              })
                              result=false
                              return
                        }
                  })
                  if(result){
                        this.$http.post('/answer/add',this.$qs.stringify({
                              content:JSON.stringify(this.paperList.content),
                              paper_id:this.paper_id,
                              note:this.note,
                              items:JSON.stringify(this.items)
                        })).then(result=>{
                              if(result.data.error==0){
                                    this.$router.push({name:'answerDown'})
                              }
                              if(result.data.error==5){
                                    this.$router.push({name:'answerInvalid'})    
                              }
                        }).catch(error=>{
                              console.log(error)
                        })     
                  }                         
            }
      },
      created(){
            // 调用问卷请求方法
            this.getPaper()
      }
}
</script>

<style>
.el-card{
      margin-bottom: 10px
}
</style>

